<template>
	<view>
		<view class="top">
			<image src="/static/images/bj.png" mode="widthFix"></image>
		</view>
		<view class="status_bar"></view>
		<view class="user" @click="goUserinfoPage">
			<view class="user-edit">
				<view class="edit-icon">
					<image src="/static/images/edit.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="user-content">
				<view class="user-image">
					<image :src="userinfo.head_pic" mode="aspectFill"></image>
				</view>
				<view class="user-info">
					<view class="user-name">
						<text>{{userinfo.nickname || ''}}</text>
					</view>
					<view class="user-vip">
						<text>会员编号：{{userinfo.user_id || ''}}</text>
					</view>
					<view class="user-contact">
						<text v-if="userinfo.weichat">微信号：{{userinfo.weichat || ''}}</text>
						<text v-if="userinfo.wangwang">旺旺：{{userinfo.wangwang || ''}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="service">
			<view class="service-content" @click="businessUserOpen">
				<view>跟单业务员:{{userinfo.salesmans || ''}}为您服务</view>
				<view class="phone">
					<text class="txt">电话：{{userinfo.salesmobile || ''}}</text>
					<text class="txt">微信：{{userinfo.salesweichat || ''}}</text>
				</view>
			</view>
		</view>
		<!-- <view class="menu">
			<view class="menu-content">
				<view class="menu-list">
					<u-grid :border="false" @click="menuClick" :col="3">
						<u-grid-item v-for="(item,index) in menuList" :key="index">
							<view class="menu-item">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-title">
									<text class="grid-text">{{item.title}}</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view> -->
		<view class="menu">
			<view class="menu-content">
				<view class="menu-title">
					<text>我的服务</text>
				</view>
				<view class="menu-list">
					<u-grid :border="false" @click="serviceClick" :col="3">
						<u-grid-item v-for="(item,index) in serviceList" :key="index">
							<view class="menu-item">
								<view class="item-icon">
									<image :src="item.icon" mode="widthFix"></image>
								</view>
								<view class="item-title">
									<text class="grid-text">{{item.title}}</text>
								</view>
							</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
		</view>
		
		<u-popup :show="feedbackShow" mode="center" :safeAreaInsetTop="true" bgColor="transparent" @close="feedbackPopupClose">
			<view class="feedback-popup">
				<view class="feedback-content">
					<view class="feedback-item">
						<view class="title">联系人</view>
						<view class="value">
							<text class="txt">{{serviseInfo.username || ''}}</text>
						</view>
					</view>
					<view class="feedback-item">
						<view class="title">微信号</view>
						<view class="value">
							<text class="txt">{{serviseInfo.weixin || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(serviseInfo.weixin)">复制</view>
						</view>
					</view>
					
					<view class="feedback-item">
						<view class="title">QQ</view>
						<view class="value">
							<text class="txt">{{serviseInfo.qq || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(serviseInfo.qq)">复制</view>
						</view>
					</view>
					
					<view class="feedback-item">
						<view class="title">手机号</view>
						<view class="value">
							<text class="txt">{{serviseInfo.phone || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(serviseInfo.phone)">复制</view>
						</view>
					</view>
				</view>
				<view class="close-icon">
					<image @click="feedbackPopupClose" src="/static/images/close001.png" mode="widthFix" class="img"></image>
				</view>
			</view>
		</u-popup>
		
		
		<u-popup :show="businessUserShow" mode="center" :safeAreaInsetTop="true" bgColor="transparent" @close="businessUserClose">
			<view class="feedback-popup">
				<view class="feedback-content">
					<view class="feedback-item">
						<view class="title">业务员</view>
						<view class="value">
							<text class="txt">{{userinfo.salesmans || ''}}</text>
						</view>
					</view>
					<view class="feedback-item" v-if="userinfo.salesweichat">
						<view class="title">微信号</view>
						<view class="value">
							<text class="txt">{{userinfo.salesweichat || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(userinfo.salesweichat)">复制</view>
						</view>
					</view>
					
					<view class="feedback-item" v-if="userinfo.saleswangwang">
						<view class="title">汪汪</view>
						<view class="value">
							<text class="txt">{{userinfo.saleswangwang || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(userinfo.saleswangwang)">复制</view>
						</view>
					</view>
					
					<view class="feedback-item" v-if="userinfo.salesmobile">
						<view class="title">手机号</view>
						<view class="value">
							<text class="txt">{{userinfo.salesmobile || ''}}</text>
							<view class="copy-btn" @click="copyServiseStr(userinfo.salesmobile)">复制</view>
						</view>
					</view>
				</view>
				<view class="close-icon">
					<image @click="businessUserClose" src="/static/images/close001.png" mode="widthFix" class="img"></image>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import {getUserinfo, getServiseInfo} from '@/api/user.js';
	export default {
		data() {
			return {
				userinfo: {},
				serviseInfo: {},
				menuList: [{
						title: '我的地址',
						icon: '/static/images/user-menu1.png',
						// path: '/pages/address/index'
					},
					{
						title: '申报名称',
						icon: '/static/images/user-menu2.png',
						// path: '/pages/identity/index'
					},
					{
						title: '我的账单',
						icon: '/static/images/user-menu3.png',
						// path: '/pages/order/index'
					},
					{
						title: '缔惠账户',
						icon: '/static/images/user-menu4.png',
						// path: '/pages/wallet/account'
					},
					{
						title: '我的钱包',
					 icon: '/static/images/user-menu5.png',
						// path: '/pages/wallet/index'
					},
					{
						title: '运费估算',
						icon: '/static/images/user-menu6.png',
						// path: '/pages/user/freight'
					},
					// {
					// 	title: '我的凭证',
					// 	icon: '/static/images/voucher.png',
					// 	path: '/pages/voucher/index'
					// }
				],
				serviceList: [{
						title: '建议与投诉',
						icon: '/static/images/user-menu7.png',
						path: '',
						method: 'feedbackPopupOpen'
					},
					// {
					// 	title: '好友分享',
					// 	icon: '/static/images/user-menu8.png',
					// 	// path: '/pages/user/share'
					// }
				],
				feedbackShow: false,
				businessUserShow: false
			}
		},
		async onLoad() {
			if (!this.isLogin) {
				uni.reLaunch({
					url: '/pages/login/index'
				});
				return;
			}
			await this.loadServiseInfo();
		},
		async onShow() {
			await this.loadData();
		},
		computed: {
			...mapState(['data', 'isLogin'])
		},
		methods: {
			async loadServiseInfo() {
				try {
					let res = await getServiseInfo(this?.data?.user?.user_id);
					this.serviseInfo = res.data;
				} catch (error) {
					
				}
			},
			async loadData() {
				try {
					let res = await getUserinfo();
					this.userinfo = res.data;
					console.log(res)
				} catch (error) {
					console.log(error);
				}
			},
			copyServiseStr(str) {
				uni.setClipboardData({
					data: str
				});
			},
			businessUserOpen() {
				this.businessUserShow = true;
			},
			businessUserClose() {
				this.businessUserShow = false;
			},
			feedbackPopupOpen() {
				this.feedbackShow = true;
			},
			feedbackPopupClose() {
				this.feedbackShow = false;
			},
			goUserinfoPage() {
				
				uni.navigateTo({
					url: '/pages/user/info'
				});
			},
			menuClick(e) {
				let info = this.menuList[e] || {};
				// uni.navigateTo({
				// 	url: info.path,
				// 	fail() {
				// 		uni.switchTab({
				// 			url: info.path
				// 		});
				// 	}
				// });
			},
			serviceClick(e) {
				let info = this.serviceList[e] || {};
				if (info.method) {
					this[info.method]();
					return;
				}
				// uni.navigateTo({
				// 	url: info.path,
				// 	fail() {
				// 		uni.switchTab({
				// 			url: info.path
				// 		});
				// 	}
				// });
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.top {
		width: 100%;
		position: fixed;
		top: 0;

		image {
			width: 100%;
		}

		z-index: 0;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.user {
		position: relative;
		z-index: 1;
		padding: 30rpx;
		box-sizing: border-box;

		.user-edit {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: center;

			.edit-icon {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 108rpx;
				height: 60rpx;
				background: rgba(255, 255, 255, 0.3);
				border-radius: 30rpx;
				border: 3rpx solid rgba(255, 255, 255, 0.63);

				image {
					width: 32rpx;
					height: 32rpx;
				}
			}
		}
	
	.user-content {
			padding-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.user-image {
				width: 152rpx;
				height: 152rpx;
				background: #FADCDB;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 138rpx;
					height: 138rpx;
					border-radius: 50%;
				}
			}

			.user-info {
				width: 516rpx;

				.user-name {
					font-size: 40rpx;
					color: #333;
					font-weight: bold;
				}

				.user-vip {
					padding-top: 25rpx;
					font-size: 24rpx;
					color: #999;
					font-weight: 500;
				}

				.user-contact {
					padding-top: 15rpx;
					font-size: 24rpx;
					color: #999;
					font-weight: 500;

					text {
						&:first-child {
							margin-right: 28rpx;
						}
				}
					}
			}
		}
	}

	.service {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-top: 42rpx;
	
		.service-content {
			font-size: 26rpx;
			color: #666;
			font-weight: 500;
			width: 560rpx;
			text-align: center;
			padding: 25rpx 10rpx;
			box-sizing: border-box;
			background: rgba(245, 236, 236, 0.82);
			border-radius: 22rpx 22rpx 0px 0px;
			backdrop-filter: blur(9rpx);
			
			.phone {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 10rpx 30rpx 0 30rpx;
				box-sizing: border-box;
				font-size: 24rpx;
			}
		}
	}

	.menu {
		position: relative;
		z-index: 1;
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.menu-content {
			background: #FFFFFF;
			box-shadow: 2rpx 2rpx 28rpx 0px rgba(0, 0, 0, 0.06);
			border-radius: 20rpx;
			width: 100%;

			.menu-title {
				padding: 26rpx 0 0 40rpx;
				box-sizing: border-box;
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				margin-bottom: -20rpx;
			}

			.menu-list {
				width: 100%;
				padding: 20rpx 0;

				.menu-item {
					padding: 28rpx 0;

					.item-icon {
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}

					.item-title {
						padding-top: 12rpx;
						font-size: 24rpx;
						color: #333;
						font-weight: 500;
					}
				}
			}
		}

	}

	.feedback-popup {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		
		.feedback-content {
			width: 580rpx;
			background-color: #fff;
			padding: 0 44rpx;
			box-sizing: border-box;
			border-radius: 20rpx;
			
			.feedback-item {
				width: 100%;
				height: 136rpx;
				border-bottom: 2rpx solid rgba(#000, .04);
				box-sizing: border-box;
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.title {
					width: 120rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
					text-align: left;
				}
				
				.value {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.txt {
						font-size: 32rpx;
						font-weight: bold;
						color: #333;
					}
					
					.copy-btn {
						width: 96rpx;
						height: 56rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 8rpx;
						background-color: #333;
						color: #fff;
						font-size: 26rpx;
						font-weight: 500;
					}
				}
			}
			
			.feedback-item:last-of-type {
				border-bottom: none;
			}
		}
		
		.close-icon {
			padding-top: 48rpx;
			
			.img {
				width: 60rpx;
				height: 60rpx;
			}
		}
	}
</style>
